<template>
	<view class="filling_view">
		<view class="f_tishi">
			完善资料用于精准推荐院校和相关政策，为了您能更好
			的用户体验，请务必保证资料准确
		</view>
		<view class="hang_from">
			<!-- <view class="sy_hang">
				<view class="s_left">
					是否本市户籍
				</view>
				<view class="r_left" @click="showPop('huji')">
					<picker @change="bindHujiChange" :value="arrayHujiSel" :range="arrayHuji" range-key="name" class="sy_picker">
						<view class="c_flex" v-if="arrayHujiSel < 0">请选择 <image src="../../static/mine/mjt2.png" class="mjt1_img"></image></view>
						<view class="c_flex" v-if="arrayHujiSel > -1">{{arrayHuji[arrayHujiSel].name}} <image src="../../static/mine/mjt2.png" class="mjt1_img"></image></view>
					</picker>
				</view>
			</view> -->
			
			<view class="sy_hang">
				<view class="s_left">
					个人信息
				</view>
				<view class="r_left" @click="toXinx">
					请完善
					<image src="../../static/mine/mjt2.png" class="mjt1_img"></image>
				</view>
			</view>
			<view class="sy_hang">
				<view class="s_left">
					升学区域
				</view>
				<view class="r_left" @click="showPop('quyu')">
					<picker @change="bindAreaChange" :value="arrayAreaSel" :range="arrayArea" range-key="name" class="sy_picker">
						<view class="c_flex" v-if="arrayAreaSel < 0">请选择 <image src="../../static/mine/mjt2.png" class="mjt1_img"></image></view>
						<view class="c_flex" v-if="arrayAreaSel > -1">{{arrayArea[arrayAreaSel].name}} <image src="../../static/mine/mjt2.png" class="mjt1_img"></image></view>
					</picker>
				</view>
			</view>
		</view>
		<view class="sy_title_c" @click="showBanji">
			各科估分情况<image src="../../static/wenhao.png" class="wenhao_img"></image>
		</view>
		<view class="hang_from2">
			<view class="sy_hang">
				<view class="s_left">
					语文（满分130）
				</view>
				<view class="r_left">
					<input type="number" @input="jisuan('yuwen_min',1,130)" class="c_input" v-model="formData.yuwen_min" placeholder="请输入"/>
					<view class="gang"></view>
					<input type="number" @input="jisuan('yuwen_max',1,130)" class="c_input" v-model="formData.yuwen_max" placeholder="请输入"/>
				</view>
			</view>
			<view class="sy_hang">
				<view class="s_left">
					数学（满分130）
				</view>
				<view class="r_left">
					<input type="number" @input="jisuan('shuxue_min',1,130)" class="c_input" v-model="formData.shuxue_min" placeholder="请输入"/>
					<view class="gang"></view>
					<input type="number" @input="jisuan('shuxue_max',1,130)" class="c_input" v-model="formData.shuxue_max" placeholder="请输入"/>
				</view>
			</view>
			<view class="sy_hang">
				<view class="s_left">
					英语（满分130）
				</view>
				<view class="r_left">
					<input type="number" @input="jisuan('yingyu_min',1,130)" class="c_input" v-model="formData.yingyu_min" placeholder="请输入"/>
					<view class="gang"></view>
					<input type="number" @input="jisuan('yingyu_max',1,130)" class="c_input" v-model="formData.yingyu_max" placeholder="请输入"/>
				</view>
			</view>
			<view class="sy_hang">
				<view class="s_left">
					物理（满分100）
				</view>
				<view class="r_left">
					<input type="number" @input="jisuan('wuli_min',1,100)" class="c_input" v-model="formData.wuli_min" placeholder="请输入"/>
					<view class="gang"></view>
					<input type="number" @input="jisuan('wuli_max',1,100)" class="c_input" v-model="formData.wuli_max" placeholder="请输入"/>
				</view>
			</view>
			<view class="sy_hang">
				<view class="s_left">
					化学（满分100）
				</view>
				<view class="r_left">
					<input type="number" @input="jisuan('huaxue_min',1,100)" class="c_input" v-model="formData.huaxue_min" placeholder="请输入"/>
					<view class="gang"></view>
					<input type="number" @input="jisuan('huaxue_max',1,100)" class="c_input" v-model="formData.huaxue_max" placeholder="请输入"/>
				</view>
			</view>
			<view class="sy_hang">
				<view class="s_left">
					政治（满分50）
				</view>
				<view class="r_left">
					<input type="number" @input="jisuan('zhengzhi_min',1,50)" class="c_input" v-model="formData.zhengzhi_min" placeholder="请输入"/>
					<view class="gang"></view>
					<input type="number" @input="jisuan('zhengzhi_max',1,50)" class="c_input" v-model="formData.zhengzhi_max" placeholder="请输入"/>
				</view>
			</view>
			<view class="sy_hang">
				<view class="s_left">
					历史（满分50）
				</view>
				<view class="r_left">
					<input type="number"  @input="jisuan('lishi_min',1,50)" class="c_input" v-model="formData.lishi_min" placeholder="请输入"/>
					<view class="gang"></view>
					<input type="number"  @input="jisuan('lishi_max',1,50)" class="c_input" v-model="formData.lishi_max" placeholder="请输入"/>
				</view>
			</view>
			<view class="sy_hang">
				<view class="s_left">
					体育（满分50）
				</view>
				<view class="r_left f_full">
					<input type="number"  @input="jisuan('tiyu',1,50)" class="c_input" v-model="formData.tiyu" placeholder="请输入"/>
				</view>
			</view>
		</view>
		<view class="pub_bottom_sub_sy">
			<view class="sub_btn tb" @click="toHistory">
				历史填报
			</view>
			<view class="sub_btn tc" @click="toPayPage">
				立即获取
			</view>
		</view>
		<uni-popup ref="banjiPopup" type="center">
			<sy-popup1 :title="'班级简介'" :content="popContent" @close="$refs.banjiPopup.close()"></sy-popup1>
		</uni-popup>
		<uni-popup ref="loginPop" type="bottom">
			<sy-login @closePop="$refs.loginPop.close()"></sy-login>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return { 
				popContent:"按学科录入估分范围，总分估分范围不得超过50分，学生可参考一模成绩进行估分",
				arrayHuji: [{name:'否'},{name: '是'}],
				arrayHujiSel:-1,
				arrayArea: [{name:'荔湾区'},{name: '越秀区'},{name: '越秀区'},{name: '越秀区'},{name: '越秀区'}],
				arrayAreaSel:-1,
				formData:{
					yuwen_min:"",
					yuwen_max:"",
					shuxue_min:"",
					shuxue_max:"",
					yingyu_min:"",
					yingyu_max:"",
					wuli_min:"",
					wuli_max:"",
					huaxue_min:"",
					huaxue_max:"",
					zhengzhi_min:"",
					zhengzhi_max:"",
					lishi_min:"",
					lishi_max:"",
					tiyu:"",
				}
			}
		},
		onLoad() {
			this.getSchoolTyle();
		},
		computed:{
			userInfo(){
				return this.$store.state.userInfo
			},
		},
		methods: {
			jisuan(type,num1,num2){
				// 'yuwen_min',1,130
				if(this.formData[type] < num1 || this.formData[type] > num2){
					this.formData[type] = "";
					this.$msg("您输入范围内的分数！")
				}
			},
			toXinx(){
				if(this.userInfo.id){
					uni.navigateTo({
						url:"/pages/mine/mineSet"
					})
				}else{
					this.$refs.loginPop.open();
				}
			},
			showBanji(){
				this.$refs.banjiPopup.open()
			},
			getSchoolTyle(){
				this.$queryApi("post","/school.school/type", {}, res => {
					console.log(res,"学区类型")
					this.arrayArea = res.data.area;
				},"false","noMsg")
			},
			toHistory(){
				uni.navigateTo({
					url:"/pages/order/orderAdmin"
				})
			},
			toPayPage(){
				if(this.userInfo.id){
					let canSub = true;
					for(let key in this.formData){
						console.log(this.formData[key])
						if(this.formData[key] == ""){
							canSub = false
						}
					}
					// if(this.arrayHujiSel == -1 ){
					// 	this.$msg("请选择是否为本市");
					// 	return false;
					// }
					// if(this.arrayAreaSel == -1 ){
					// 	this.$msg("请选择升学区域");
					// 	return false;
					// }
					if(!canSub){
						console.log("dsd")
						this.$msg("请完善各科分数信息");
						return false;
					}
					
					// return false;
					let dataL = {
						...this.formData,
						area:this.arrayArea[this.arrayAreaSel].id,
					}
					this.$queryApi("post","/school.order/create", dataL, res => {
						console.log(res,"创建订单")
						uni.navigateTo({
							url:"/pages/order/order?orderId="+res.data.id
						})
					},"","noMsg")
				}else{
					this.$refs.loginPop.open();
				}
			},
			showPop(type){
				
			},
			bindHujiChange(e){
				this.arrayHujiSel = e.detail.value
			},
			bindAreaChange(e){
				this.arrayAreaSel = e.detail.value
			},
		}
	}
</script>

<style lang="scss">
	
	::v-deep .uni-picker-toggle.uni-picker-custom{
		border-radius: 30rpx 30rpx 0 0;
	}
.filling_view{
	padding-bottom: 160rpx;
	background-color: #fff;
	min-height: 100vh;
	box-sizing: border-box;
	.f_tishi{
		background-color: #FFF7E5;
		padding: 22rpx 32rpx;
		color: #FA6B01;
		font-size: 28rpx;
	}
	
	.sy_title_c{
		color: #3D3D3D;
		font-weight: bold;
		display: flex;
		font-size: 32rpx;
		margin-top:22rpx;
		background-color: #fff;
		padding: 40rpx 30rpx 10rpx 32rpx;
		align-items: center;
		.wenhao_img{
			width: 26rpx;
			height: 26rpx;
			margin-left: 10rpx;
		}
		&:before{
			content: "";
			display: block;
			width: 8rpx;
			height: 32rpx;
			background-color: #F93F38;
			margin-right: 12rpx;
			position: relative;
			top: 6rpx;
		}
	}
	.hang_from{
		padding: 0 32rpx;
		background-color: #fff;
		.sy_hang{
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #F6F6F6;
			padding: 30rpx 0;
			
			.s_left{
				color: #3D3D3D;
				font-size: 28rpx;
			}
			.r_left{
				display: inline-flex;
				align-items: center;
				font-size: 28rpx;
				.m_input{
					text-align: right;
					font-size: 28rpx;
				}
				.mjt1_img{
					width: 32rpx;
					height: 32rpx;
					margin-left: 16rpx;
					position: relative;
					
				}
				.c_flex{
					display: inline-flex;
					align-items: center;
				}
			}
		}
	}
	.hang_from2{
		padding: 0 32rpx 40rpx 32rpx;
		background-color: #fff;
		.sy_hang{
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #F6F6F6;
			padding: 20rpx 0;
			align-items: center;
			.s_left{
				color: #3D3D3D;
				font-size: 28rpx;
				font-weight: 400;
			}
			.r_left{
				display: inline-flex;
				align-items: center;
				font-size: 28rpx;
				&.f_full{
					// flex:1;
					.c_input{
						width: 416rpx;
					}
				}
				.c_input{
					text-align: center;
					font-size: 28rpx;
					width: 164rpx;
					background-color: #F5F7FA;
					padding: 12rpx 0;
					border-radius: 12rpx;
				}
				.gang{
					width: 56rpx;
					height: 2rpx;
					background-color: #BDC0D0;
					margin: 0 16rpx;
				}
			}
		}
	}
}
	
</style>
